<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>{if $user.user_auth==1}续费会员{else /}购买会员{/if}</title>
	<link rel="stylesheet" type="text/css" href="__CSS__/api.css" />
	<link rel="stylesheet" type="text/css" href="__CSS__/aui.css" />
	<style>
		body {
			background-color: #FFFFFF;
		}

		.aui-bar-nav .aui-iconfont {
			position: relative;
			font-family: "aui_iconfont" !important;
			font-size: 0.75rem;
			color: #E73C5C;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			height: 2.4rem;
		}

		.aui-bar-nav {
			background-color: #F2F2F2;
		}

		.aui-icon-tu {
			height: 2.4rem;
			width: 46px;
			background: url('__IMG__/left.png') no-repeat 0.5rem center;
			background-size: 16px 16px;
		}

		.aui-bar-nav .aui-title {
			font-size: 0.9rem;
			color: #000000;
			font-weight: bold;
		}

		.aui-icon-rightu {
			height: 2.4rem;
			width: 49px;
			background: url('__IMG__/dian.png') no-repeat 0.6rem center;
			background-size: 22px 22px;
		}

		.top_content {
			width: 100%;
			height: 9.5rem;
			background-color: #303030;
			position: relative;
		}

		.per {
			width: 100%;
			height: 3.25rem;
			padding:  0.75rem;
			padding-top: 1.5rem;
		}

		.per_avatar {
			width: 3.25rem;
			height: 3.25rem;
			background-color: #ffffff;
			border-radius: 50%;
			overflow: hidden;
		}

		.per_avatar img {
			width: 100%;
			height: 100%;
		}

		.right_per {
			height: 100%;
			color: #ffffff;
			padding-left: 0.7rem;
			padding-top: 0.5rem
		}

		.name {
			width: auto;
		}

		.per_name {
			max-width: 8rem;
		}

		.vip {
			width: 1rem;
			height: 1rem;
			/*border-radius: 50%;*/
			overflow: hidden;
			margin-left: 0.5rem;
		}

		.time {
			font-size: 0.6rem;
		}

		.card {
			width: 91.66666%;
			height: 5.65rem;
			margin: auto;
			border-radius: 10px;
			position: absolute;
			top: 5.5rem;
			left: 4.167%;
			background: url("__IMG__/vipcard@3x.png");
			/*background-color: red;*/
			background-size: cover;
			background-position: center center;
		}
		.name1{
			position: absolute;
			top: 20px;
	    /*left: 15px;*/
		}
		.name2{
			position: absolute;
			bottom: 20px;
		}
		.white_content{
			padding-top: 2.5rem;
			padding-left: 0.75rem;
		}
		.bottom_btn{
			position:fixed;
			bottom: 0;
			width: 100%;
			height: 2.45rem;
			box-shadow:0px -0.5px 3px 0px rgba(239,239,239,1);
		}
		.yuanjia{
			text-decoration:line-through;
			padding-left: 0.425rem;
			color:#999999;
			font-size: 0.7rem;
			font-weight: normal;
			/*line-height: 2rem;*/
		}
		.xu_btn{
			margin: auto;
			margin-top: 0.35rem;
			width: 6.6rem;
			height: 1.75rem;
			background-color: #F4A435;
			border-radius: 17.5px;
			line-height: 1.75rem;
			text-align: center;
			color:#FFFFFF;
			font-size: 0.8rem;

			float: right;
			margin-right: 0.75rem;
		}
		.jiage{

			text-align: center;
			line-height: 2.45rem;
		}
		.zk_jia{
			color:#333333;
			font-size: 0.9rem;
			font-weight: 600;
		}
		.per_name1{
			width:auto;
			padding-left:0.6rem;
			color:#FFFFFF;
			max-width: none;
			font-size:0.8rem;
			line-height:1.5rem;
		}
		.yellow{
			width: 0.175rem;
			height: 0.8rem;
			margin-top: 0.2rem;
			background-color: #F4A435;
			border-radius:6px;
		}
		.tq_vip{
			padding-left:0.5rem;
			font-weight: bold;
		}
		.mokua{
			width: 3.6rem;
			margin: 1rem 0.75rem 0;
			float: left;
		}
		.mokua_img{
			width: 1.7rem;
			margin: auto;
			margin-bottom: 0.6rem;
		}
		.tit_mokua{
			color:#999999;
			font-size: 0.6rem;
			text-align: center;
		}
	</style>
</head>

<body>

	<div class="top_content">
		<div class="per flex-wrap">
			<div class='per_avatar'>
				<img src="{$user.user_image}" alt="">
			</div>
			<div class="right_per flex-con">
				<div class="name flex-wrap">
					<div class="per_name aui-ellipsis-1" style="width:auto;">{$user.user_username}</div>
					{if $user.user_auth==1}
					<img class='vip' src="__IMG__/vip@3x.png" alt="">
					{else /}
					<img class='vip' src="__IMG__/member2.png" alt="">
					{/if}
				</div>
			
				<div class="time" style="">
				{if $user['user_auth']==1}
				会员有效期至{$user.user_auth_date}
				{else /}
				开通会员
				{/if}
				</div>
			</div>
		</div>

		<div class="card">

			<div class="name flex-wrap name1" style="padding-left:0.5rem;">
				<img class='vip' src="__IMG__/king@3x.png" alt="">
				<div class="per_name aui-ellipsis-1" style="width:auto;padding-left:0.5rem;color:#FFFFFF;font-size:0.8rem;">年度VIP会员</div>
			</div>

			<div class="name flex-wrap name2" style="width:100%;padding-left:0.5rem;">

				<div class="per_name flex-con per_name1" style="">365天， 每天仅{$buy['day']}元</div>
				<div class='' style="padding-right:1rem;font-size:1rem;color:#FFFFFF;font-weight:600;">¥{$buy['a_now_price']}</div>

			</div>
		</div>
	</div>
	<div class="white_content">
			<div class="top_title flex-wrap">
				<div class="yellow"></div>
				<div class="flex-con tq_vip" style=''>会员特权</div>
			</div>
			<div class="mokua">
				<div class="mokua_img">
					<img src="__IMG__/computer@3x.png" alt="">
				</div>
				<div class="tit_mokua">免费平台课程</div>
			</div>
			<div class="mokua">
				<div class="mokua_img">
					<img src="__IMG__/book02@3x.png" alt="">
				</div>
				<div class="tit_mokua">免费平台书籍</div>
			</div>
	</div>
	<div class="bottom_btn flex-wrap">
		<div class="flex-con jiage"><p class='zk_jia'>¥ {$buy['a_now_price']}.00<span class="yuanjia">原价:¥{$buy['a_old_price']}</span>
		</p></div>
		<div class="flex-con">
			<div class="xu_btn" name="{$user.user_id}">
				{if $user.user_auth==1}
				续费会员
				{else /}
				购买会员
				{/if}
			</div>
		</div>
	</div>
	<div class="all_div" style="display:none;width: 100%;height: 100%;background-color: gray;position: absolute;z-index: 100;opacity: 0.5;top: 0;left: 0;background-color: black"></div>
</body>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript" src="__JS__/layer_mobile/layer.js"></script>
<script type="text/javascript">
    //-----购买----
    $('.xu_btn').click(function () {
        var id = $(this).attr('name');
//        location.href = '{:url("My/buyVip")}?uid='+id;
        $.ajax({
            url:'{:url("My/buyVip")}',
            data: 'uid='+id,//
            type:'POST',
            dataType:'HTML',
            success: function(returndata){
                if(returndata == 1 || returndata == 2){
                    layer.open({
                        content: '订单生成失败'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }else{
                    $('.all_div').css('display','block');
                    $('.all_div').html(returndata);
                }
            },
            error:function () {
                alert('Ajax error!');
            }
        })
    });
</script>

</html>
